// 查询条件组件
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { DATA_ENTRY, AdvancedSearch } from '../../../../../comps';
@Form.create()
class QueryC extends React.Component {
  state = {
    flag: true, // 查询按钮状态
    selectBd: [], // 入池标的下拉框数据
    selectUser: [], // 入池人员下拉框数据
    selectCompany: [], // 发行主体下拉框数据
    tableData: [], // 表格数据
    nameId: '', // 券池名称id
    current: 1, // 当前页码
    pageSize: 10, // 每页展示数量
  };

  componentDidMount() {}

  //券池名称输入框改变事件
  changeValue = (value) => {
    const { selectName, isZiGuan } = this.props;
    this.AdvancedSearch.props.form.resetFields(['stockCode', 'company', 'inPoolWay', 'startDate', 'endDate', 'userId', 'tag']);
    if (value !== undefined && value !== '' && value !== null) {
      this.setState({
        flag: false,
        nameId: value,
      });
      if (isZiGuan) {
        //通过id拿到券池名称
        let securityPoolName = selectName.filter((item) => {
          return item.id == value;
        });
        this.props.gteSecurityPoolName(securityPoolName[0]?.name);
      }
    } else {
      this.setState(
        {
          flag: true,
        },
        this.props.clearTable(),
      );
    }
    this.getDatas(value);
  };

  // 根据券池名称获取下拉框相关数据
  getDatas = (value) => {
    const { dispatch } = this.props;
    if (value !== undefined) {
      //入池人员
      dispatch({
        type: 'couponPoolQueryM/findUser',
        payload: {
          securityPoolId: value,
        },
        callback: (res) => {
          this.setState({
            selectUser: res.data.dataSource,
          });
        },
      });

      //发行主体
      dispatch({
        type: 'couponPoolQueryM/findCompany',
        payload: {
          securityPoolId: value,
        },
        callback: (res) => {
          this.setState({
            selectCompany: res.data.dataSource,
          });
        },
      });

      //入池标的
      dispatch({
        type: 'couponPoolQueryM/findBd',
        payload: {
          securityPoolId: value,
        },
        callback: (res) => {
          this.setState({
            selectBd: res.data.dataSource,
          });
        },
      });
    }
  };

  // 响应查询事件
  searchData = (formDate) => {
    const data = {
      securityPoolId: this.state.nameId,
      securityPoolItemId: formDate.stockCode || [],
      tag: formDate.tag || [],
      inPoolWay: formDate.inPoolWay || [],
      userId: formDate.userId || [],
      company: formDate.company || [],
    };
    if (formDate.startDate) {
      data.startTime = formDate.startDate.format('YYYY-MM-DD') || '';
    }
    if (formDate.endDate) {
      data.endTime = formDate.endDate.format('YYYY-MM-DD') || '';
    }
    data.pageInfo = {
      currentPage: this.state.current,
      numInPage: this.state.pageSize,
    };
    // 抛出查询事件
    this.props.onQuery(data);
  };

  //入池标的模糊搜索下拉
  couponPoolSearch = (value) => {
    this.timer ? clearTimeout(this.timer) : '';
    this.timer = setTimeout(() => {
      this.props.dispatch({
        type: 'couponPoolQueryM/findBd',
        payload: {
          poolEntryTarget: value,
          securityPoolId: this.state.nameId,
        },
        callback: (res) => {
          if (res && res.data.dataSource) {
            this.setState({
              selectBd: res.data.dataSource,
            });
          } else {
            this.setState({
              selectBd: [],
            });
          }
        },
      });
    }, 500);
  };

  // 改变券池名称下拉数据格式
  onChangeName = (e) => {
    let selectName = [];
    if (e && e.length) {
      e.map((item) => {
        selectName.push({
          title: item.name,
          value: item.id,
        });
      });
      return selectName;
    }
  };

  //发行主体模糊搜索
  companySearch = (value) => {
    if (value) {
      this.timer ? clearTimeout(this.timer) : '';
      this.timer = setTimeout(() => {
        this.props.dispatch({
          type: 'couponPoolQueryM/findCompany',
          payload: {
            companyCondition: value,
            securityPoolId: this.state.nameId,
          },
          callback: (res) => {
            this.setState({
              selectCompany: res.data.dataSource,
            });
          },
        });
      }, 500);
    }
  };

  // 改变发行主体下拉数据格式
  onChangeCompany = (e) => {
    let Company = [];
    if (e && e.length) {
      e.map((item) => {
        Company.push({
          title: item,
          value: item,
        });
      });
      return Company;
    }
  };

  // 改变入池人员下拉数据格式
  onChangeUser = (e) => {
    let userId = [];
    if (e && e.length) {
      e.map((item) => {
        userId.push({
          title: item.name,
          value: item.userId,
        });
      });
      return userId;
    }
  };

  render() {
    const { selectUser, selectCompany, selectBd, flag } = this.state;
    const { selectPoolTag, selectName } = this.props;
    const chooseName = this.onChangeName(selectName);
    const company = this.onChangeCompany(selectCompany);
    const userSelect = this.onChangeUser(selectUser);
    const selectInpool = [
      { value: 'auto', title: '自动入池' },
      { value: 'manual', title: '手动入池' },
    ];
    let newSelectBd = selectBd.length == 0 ? [{ title: '您搜索的标的不在券池内。', value: '1', disabled: true }] : selectBd;
    return (
      <AdvancedSearch
        dataSource={[
          {
            dataIndex: 'name',
            title: '券池名称',
            type: DATA_ENTRY.SELECT,
            dataSource: chooseName,
            showSearch: true,
            allowClear: true,
            onChange: (e) => {
              this.changeValue(e);
            },
            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
          },
          {
            dataIndex: 'stockCode',
            title: '入池标的',
            type: DATA_ENTRY.SELECT,
            dataSource: newSelectBd,
            isMultiple: true,
            allowClear: true,
            filterOption: false,
            onSearch: (e) => this.couponPoolSearch(e),
            disabled: this.state.flag,
          },
          {
            dataIndex: 'company',
            title: '发行主体',
            type: DATA_ENTRY.SELECT,
            dataSource: company,
            isMultiple: true,
            allowClear: true,
            filterOption: false,
            disabled: this.state.flag,
            onSearch: (e) => {
              this.companySearch(e);
            },
          },
          {
            dataIndex: 'inPoolWay',
            title: '入池方式',
            type: DATA_ENTRY.SELECT,
            dataSource: selectInpool,
            isMultiple: true,
            allowClear: true,
            disabled: this.state.flag,
          },
          {
            dataIndex: ['startDate', 'endDate'],
            title: '入池日期',
            type: DATA_ENTRY.RANGEDATE,
            allowClear: true,
            hasDataBD: this.state.hasDataBD,
            hasDataED: this.state.hasDataED,
            onRef: (ref) => this.setState({ RANGEDATE: ref }),
          },
          {
            dataIndex: 'userId',
            title: '入池人员',
            type: DATA_ENTRY.SELECT,
            dataSource: userSelect,
            isMultiple: true,
            allowClear: true,
            disabled: this.state.flag,
            filterOption: (
              input,
              option, //模糊搜索value 和 title
            ) => {
              return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            },
          },
          {
            dataIndex: 'tag',
            title: '标签',
            type: DATA_ENTRY.TREESELECT,
            dataSource: selectPoolTag,
            isMultiple: true,
            allowClear: true,
            treeCheckable: true,
            showCheckedStrategy: true,
            disabled: this.state.flag,
          },
        ]}
        onRef={(ref) => (this.AdvancedSearch = ref)}
        queryDisabled={flag}
        onClear={() => {
          this.setState(
            {
              flag: true,
            },
            this.props.onClear(),
          );
        }}
        onQuery={this.searchData}
      />
    );
  }
}

export default connect(({ couponPoolQueryM }) => ({ couponPoolQueryM }))(QueryC);
